<template>
  <div class="container_shop">
    <div class="container_shop__header">
      <div class="container_shop__header__left iconfont" @click="toBack">
        &#xe84f;
      </div>
      <div class="container_shop__header__right">
        <div class="container_shop__header__right__icon iconfont">&#xe600;</div>
        <input
          type="text"
          class="container_shop__header__right__ipt"
          placeholder="请输入想要的商品名称"
          @keyup.enter="searchGoods"
        />
      </div>
    </div>
    <div class="container_shop__content">
      <div class="container_shop__content">
        <van-sidebar v-model="active" @change="onChange">
          <van-sidebar-item title="推荐" />
          <van-sidebar-item title="折扣" />
          <van-sidebar-item title="处方药" />
          <van-sidebar-item title="非处方药" />
        </van-sidebar>
        <div class="container_shop__content__right-content">
          <div
            class="container_shop__content__right-content__items"
            v-for="(item, index) of GoodsItems"
            :key="index"
          >
            <img :src="item.imgUrl" alt="" />

            <div class="container_shop__content__right-content__items__right">
              <div
                class="container_shop__content__right-content__items__right__top"
              >
                {{ item.goodsName }}
              </div>
              <div
                class="container_shop__content__right-content__items__right__mid"
              >
                售价:<span>￥{{ item.goodsPrice }}</span>
              </div>
              <div
                class="container_shop__content__right-content__items__right__bottom"
              >
                <div
                  class="container_shop__content__right-content__items__right__bottom__left"
                >
                  月售{{ item.goodsTitle }}件
                </div>
                <div
                  class="container_shop__content__right-content__items__right__bottom__count"
                >
                  <span></span>
                  {{}}
                  <span></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container_shop__bottom">
      <div class="container_shop__bottom__left">
        <van-badge :content="null">
          <div
            class="container_shop__bottom__left__icon iconfont"
            v-if="!hadGoods"
            @click="clickCart"
          >
            &#xe609;
          </div>
          <div
            class="container_shop__bottom__left__icon iconfont"
            v-else
            @click="clickCart"
          >
            &#xe605;
          </div>
        </van-badge>
      </div>
      <div class="container_shop__bottom__mid">总计: <span>￥555</span></div>
      <div class="container_shop__bottom__right">
        <button class="container_shop__bottom__right__btn" @click="toPay">
          去结算
        </button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { showToast } from "vant";
import { useBackRouterEffect } from "../../../effects/backEffect";
const route = useRoute();
const active = ref(0);
const hadGoods = ref(false);
const toBack = useBackRouterEffect();
const GoodsItems = ref([
  {
    imgUrl: "https://yydy.love/Resouce/woerma.png",
    goodsName: "阿莫西林胶囊",
    goodsPrice: 45,
    goodsTitle: 5,
    summary: "一种作为治疗感冒药的有效药",
  },
  {
    imgUrl: "https://yydy.love/Resouce/woerma.png",
    goodsName: "阿莫西林胶囊",
    goodsPrice: 45,
    goodsTitle: 5,
    summary: "一种作为治疗感冒药的有效药",
  },
  {
    imgUrl: "https://yydy.love/Resouce/woerma.png",
    goodsName: "阿莫西林胶囊",
    goodsPrice: 45,
    goodsTitle: 5,
    summary: "一种作为治疗感冒药的有效药",
  },
  {
    imgUrl: "https://yydy.love/Resouce/woerma.png",
    goodsName: "阿莫西林胶囊",
    goodsPrice: 45,
    goodsTitle: 5,
    summary: "一种作为治疗感冒药的有效药",
  },
]);

function searchGoods() {
  // console.log(415641321);
}
const onChange = (index) => {
  showToast(`标签名 ${index + 1}`);
};
const clickCart = () => {
  if (!hadGoods.value) {
    hadGoods.value = true;
  } else {
    hadGoods.value = false;
  }
};
// 点击去结算按钮
const toPay = () => {};
</script>
<style lang="scss" scoped>
.container_shop {
  &__header {
    width: 414rem;
    height: 88rem;
    padding: 44rem 10rem 20rem 10rem;
    box-sizing: border-box;
    background-color: #6481da;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18rem;
    &__left {
      color: #fff;
    }
    &__right {
      display: flex;
      width: 330rem;
      height: 30rem;
      background-color: #fff;
      border-radius: 5rem;
      padding: 5rem;
      box-sizing: border-box;
      &__icon {
        color: #000;
        margin-right: 10rem;
      }
    }
  }
  &__content {
    margin-top: 10rem;
    display: flex;
    &__right-content {
      width: 334rem;
      min-height: 700rem;
      background-color: #fff;
      padding: 20rem 0;
      &__items {
        display: flex;
        width: 320rem;
        height: 80rem;
        display: flex;
        margin: 10rem 0 10rem 10rem;
        padding-bottom: 10rem;
        align-items: center;
        border-bottom: #0606061d solid 1rem;
        img {
          width: 65rem;
          height: 65rem;
          margin: 0 10rem;
        }
        &__right {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 14rem;
          &__top {
            font-size: 16rem;
            font-weight: bold;
          }
          &__mid {
            margin: 5rem 0;
            span {
              color: red;
            }
          }
          &__bottom {
            width: 245rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  &__bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 414rem;
    height: 53rem;
    display: flex;
    background-color: #fff;
    align-items: center;
    justify-content: space-between;
    padding: 5rem;
    box-sizing: border-box;
    font-size: 14rem;

    &__left {
      margin-left: 20rem;
      & &__icon {
        color: #5067acc7;
        font-size: 35rem;
      }
    }
    &__mid {
      margin-left: -50rem;
      span {
        font-size: 18rem;
        font-weight: bold;
        color: red;
      }
    }
    &__right {
      &__btn {
        width: 80rem;
        height: 40rem;
        background-color: #6481da;
        color: #fff;
        font-weight: bold;
        border-radius: 5rem;
      }
    }
  }
}
</style>
